<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>开放大学投票系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="lib/css/Polling.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">

        <transition name="el-fade-in-linear">
            <el-alert v-if="success"
                style="position: absolute; top:180px; left: 11%; z-index: 10; width: 80%;height: 90px;" center
                :title="this.message" type="success" :description="this.Staterecords" show-icon>
            </el-alert>

            <el-alert v-if="warning"
                style="position: absolute; top:180px; left: 11%; z-index: 10; width: 80%;height: 90px;" center
                :title="this.message" type="warning" :description="this.Staterecords" show-icon>
            </el-alert>
        </transition>

        <div class="maddileBox">
            <el-row>
                <el-col :span="24">
                    <div class="title1">
                        <img src="./lib/images/production_pro.png" style="vertical-align:bottom;">
                        <span class="titleName">
                            <span>{{title}}</span>
                        </span>
                    </div>
                    <div class="title2">
                        <img src="./lib/images/author_pro.png" style="width:90px; vertical-align:bottom;">
                        <span class="authorName">
                            <span>{{author}} </span>
                        </span>
                    </div>
                    <div class="grid-content bg-purple-dark">
                        <el-row class="btnMiddle">
                            <button class="btnLive" style="border-radius: 80px;" type="primary" round @click="Live">
                            </button><br>
                            <button class="noLive" type="info" style="border-radius: 80px;" round @click="Nolive">
                            </button>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    uuid: '',
                    title: '',
                    author: '',
                    message: '',
                    Staterecords: '',
                    clickSum: 0,
                    success: false,
                    warning: false,
                    timer: null
                };
            },
            methods: {
                /**
                 * 投票请求 【评委端】
                 * @param uuid 用户ID 
                 * @param ticket 投票状态 喜欢'10' / 不喜欢'0'
                 * @returns {message}
                 */
                Live() { this.Vote(this.uuid + this.title, 10, '/vote/pwVote') },
                Nolive() { this.Vote(this.uuid + this.title, 0, '/vote/pwVote') },

                //  检测作品切换 因功能修改, 问题原因 id 丢失
                AxiosTime() {
                    setInterval(() => {
                        axios.get('/vote/getArtwork')
                            .then(res => {
                                // let getid = sessionStorage.getItem('setProductionId');
                                // if (getid == null || getid == "") {
                                //     const setId = res.data.data.id;
                                //     sessionStorage.setItem('setProductionId', setId);
                                // } else if (getid !== res.data.data.id) {
                                //     console.log("清除处理")
                                //     this.message = ""
                                //     sessionStorage.clear();
                                // }
                                this.title = res.data.data.name
                                this.author = res.data.data.author
                            }).catch(err => { console.log(err) })
                    }, 3000)
                },

                Vote(uuid, ticket, url) {
                    this.timer != null ? clearTimeout(this.timer) : ''
                    this.timer = setTimeout(() => {
                        this.clickSum++;
                        setTimeout(() => {
                            if (this.message == "投票成功！") {
                                this.success = !this.success
                                this.Staterecords = '投票已成功，请等待下次投票'
                                setTimeout(() => { this.success = !this.success }, 2000)
                            } else if (this.message == "投票未开始！") {
                                this.warning = !this.warning
                                this.Staterecords = '投票尚未开始，请稍后'
                                setTimeout(() => { this.warning = !this.warning }, 2000)
                            } else {
                                this.warning = !this.warning
                                this.Staterecords = '投票已成功，请等待下一轮投票'
                                setTimeout(() => { this.warning = !this.warning }, 2000)
                            }
                        }, 100)
                        let param = new URLSearchParams();
                        param.append("uuid", uuid);
                        param.append("ticket", ticket);
                        axios({
                            method: 'post',
                            url: url,
                            data: param,
                        }).then(res => {
                            this.message = res.data.message
                        }).catch(err => { console.log(err) })
                    }, 500)
                },
            },
            created() {
                this.AxiosTime()
                // 获取标识
                let getuuid = localStorage.getItem('userID');
                if (getuuid == null || getuuid == "") {
                    axios.get('/vote/getuuid')
                        .then(res => {
                            this.uuid = res.data.data
                            localStorage.setItem('userID', this.uuid);
                        }).catch(err => {
                            console.log(err)
                        })
                } else { this.uuid = getuuid }

                // 获取当前正在投票的作品
                axios.get('/vote/getArtwork')
                    .then(res => {
                        console.log(res)
                        this.title = res.data.data.name
                        this.author = res.data.data.author
                    }).catch(err => { console.log(err) })
            }
        })
    </script>

</body>

</html>